.alert_board{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;

  .screen{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: all;
    @include AnimOpactiyShow();
  }

  .close-btn{
    position: absolute;
    right: 10%;
    top: 3vh;
    @include S(width, 30px);
    @include S(height, 30px);

    img{
      width: 100%;
    }
  }

  .content{
    width: 80%;
    @include S(max-width, 400px);
    height: 80vh;
    background: white;
    position: relative;
    border-radius: 5px;
    pointer-events: all;
    top: 10vh;
    // overflow-x: hidden;
    // overflow-y: auto;
    display: grid;
    grid-template-rows: auto 1fr;

    .wrapper{
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: all;
    }

    .btn-group{
      background: $colorBlueBright;
      // position: sticky;
      // top: 0;
      z-index: 10;

      .item{
        display: inline-block;
        padding: 5px 15px;
        background: $colorBlueBright;
        pointer-events: all;
        color: white;
        @include PlainText;

        &.active{
          background: white;
          color: #777;
        }

      }
    }

    .name{
      font-weight: 400;
      padding: 5px 10px;
    }

    .page{
      @include S(padding, 5px, 10px);
    }

    .message{
      @include S(padding, 10px);
      background: $accentColorBright;
      border-radius: 5px;
      position: relative;
      transform-origin: top;

      @include InlineAnimation(.5s){
        0%{transform: scaleY(0);}
        100%{transform: scaleY(1);}
      }

      // &::before{
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   width: 0;
      //   height: 0;
      //   border-top: 10px solid transparent;
      //   border-left: 10px solid transparent;
      //   border-right: 10px solid transparent;
      //   border-bottom: 10px solid $accentColorBright;
      //   top: -20px;
      //   left: 5px;
      // }
    }

    .info{
      @include S(margin-bottom, 10px);
      @include S(padding-bottom, 5px);
      border-bottom: 1px solid #f0f0f0;
    }

    .control-page{
      .styledButton{
        pointer-events: all;
        @include S(margin-bottom, 6px);
      }
    }

    .inventory-page{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;

      @include onPc(){
        grid-template-columns: 1fr 1fr 1fr;
      }

      p{
        @include PlainText;
      }

      .item{
        border-radius: 5px;
        pointer-events: all;
        border: unset;
        border: 1px solid #dedede;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .02);
        background: rgba(248, 248, 248, 0.774);
        color: #555;
        position: relative;
        @include BreakText;
        @include PlainText;
        @include S(padding, 10px, 15px);
        border-left: 6px solid rgba(187, 187, 187, 0.8);

        .num, .price{
          position: absolute;
          right: 5px;
          top: 1px;
          color: #999;
          @include PlainText;
        }
        .price{
          color: rgb(201, 107, 0);
          top: unset;
          bottom: 1px;
        }
      }
    }

    .log{
      @include PlainText;
      @include S(margin-bottom, 10px);
      @include S(padding-bottom, 5px);
      border-bottom: 1px solid #f0f0f0;
    }

    @include AnimScaleShow;
  }

  &.remove-anim{
    .screen{
      @include AnimOpactiyHide();
    }
    .content{
      @include AnimScaleHide();
    }
  }
}